<template>
  <div v-loading="loading" element-loading-text="数据加载中...">
    <div class="wrapper-box">
      <div class="tables-row">
        <el-table border style="border-right: none" :data="[{}]">
          <el-table-column label="异常统计">
            <div>
              订单数：
              {{ data.Mark }}
            </div>
            <div>樘数：{ }</div>
            <div>金额：{ }</div>
          </el-table-column>
          <el-table-column label="超时统计">
            <div>
              订单数：
              {{ data.OutTime }}
            </div>
            <div>樘数：{ }</div>
            <div>金额：{ }</div>
          </el-table-column>
          <el-table-column label="未下单">
            <div>
              订单数：
              {{ data.Produce_None }}
            </div>
            <div>樘数：{ }</div>
            <div>金额：{ }</div>
          </el-table-column>
          <el-table-column label="库存">
            <div>
              订单数：
              {{ data.Stock }}
            </div>
            <div>樘数：{ }</div>
            <div>金额：{ }</div>
          </el-table-column>
        </el-table>
      </div>
      <!-- <div class="tables-row">
        <el-table border :data="[{}]">
          <el-table-column :label="zhKey('New_Day')">
            <div>
              订单数：
              {{ data.New_Day }}
            </div>
            <div>樘数：{ }</div>
            <div>金额：{ }</div>
          </el-table-column>
          <el-table-column :label="zhKey('New_Month')">
            <div>
              订单数：
              {{ data.New_Month }}
            </div>
            <div>樘数：{ }</div>
            <div>金额：{ }</div>
          </el-table-column>
          <el-table-column :label="zhKey('NewProduce_Day')">
            <div>
              订单数：
              {{ data.NewProduce_Day }}
            </div>
            <div>樘数：{ }</div>
            <div>金额：{ }</div>
          </el-table-column>
          <el-table-column :label="zhKey('NewProduce_Month')">
            <div>
              订单数：
              {{ data.NewProduce_Month }}
            </div>
            <div>樘数：{ }</div>
            <div>金额：{ }</div>
          </el-table-column>
          <el-table-column :label="zhKey('Produce_None')">
            <div>
              订单数：
              {{ data.Produce_None }}
            </div>
            <div>樘数：{ }</div>
            <div>金额：{ }</div>
          </el-table-column>
        </el-table>
      </div>
      <div class="tables-row">
        <el-table border :data="[{}]">
          <el-table-column :label="zhKey('Finish_Day')">
            <div>
              订单数：
              {{ data.Finish_Day }}
            </div>
            <div>樘数：{ }</div>
            <div>金额：{ }</div>
          </el-table-column>
          <el-table-column :label="zhKey('Finish_Month')">
            <div>
              订单数：
              {{ data.Finish_Month }}
            </div>
            <div>樘数：{ }</div>
            <div>金额：{ }</div>
          </el-table-column>
          <el-table-column :label="zhKey('OutOfStock_Day')">
            <div>
              订单数：
              {{ data.OutOfStock_Day }}
            </div>
            <div>樘数：{ }</div>
            <div>金额：{ }</div>
          </el-table-column>
          <el-table-column :label="zhKey('OutOfStock_Month')">
            <div>
              订单数：
              {{ data.OutOfStock_Month }}
            </div>
            <div>樘数：{ }</div>
            <div>金额：{ }</div>
          </el-table-column>
          <el-table-column :label="zhKey('Stock')">
            <div>
              订单数：
              {{ data.Stock }}
            </div>
            <div>樘数：{ }</div>
            <div>金额：{ }</div>
          </el-table-column>
        </el-table>
      </div> -->
    </div>
  </div>
</template>
<script setup>
import { zhKey } from "../dict";
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
  loading: {
    type: Boolean,
    default: true,
  },
});
watch(
  () => props.data,
  () => {
    console.log("data", props.data);
  }
);
</script>
<style lang="scss" scoped>
.title {
  font-size: 16px;
  font-weight: bold;
}
.wrapper-box {
  margin-top: 10px;
  // display: grid;
  // grid-template-columns: repeat(2, 1fr);
  // grid-row-gap: 16px;
  // grid-column-gap: 16px;
  .tables-row {
    display: flex;
  }
  .statistics-contain {
    display: flex;
    font-size: 14px;
    padding: 8px;
    background: #eee;
    border-radius: 8px;
    .text-concern {
      font-size: 16px;
      font-weight: 900;
    }
    .text-item {
      display: flex;
      align-items: center;
      margin-top: 4px;
      font-size: 16px;
      .text-label {
        width: 100px;
        font-weight: bold;
        color: #424242;
      }
      .text-value {
        font-size: 20px;
        font-weight: 900;
      }
    }

    .circle-text {
      margin-right: 4px;
      width: 40px;
      height: 40px;
      border: 3px solid #3e9eff;
      border-radius: 50%;
      background-color: #fff;
      text-align: center;
      font-weight: 900;
      color: #000;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
